<!DOCTYPE html>
<html>
<head>
    <title>Physics Pulley System Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Dimensions and Positions ---
        const groundY = 450;
        const aWidth = 80;
        const aHeight = 120;
        const bWidth = 60;
        const bHeight = 70;
        const gap = 60;

        const totalWidth = aWidth + gap + bWidth;
        const startX = (canvas.width - totalWidth) / 2;

        const xA = startX;
        const yA = groundY - aHeight;
        const centerXA = xA + aWidth / 2;

        const xB = xA + aWidth + gap;
        const yB = groundY - bHeight;
        const centerXB = xB + bWidth / 2;

        const pulleyRadius = (centerXB - centerXA) / 2;
        const pulleyX = centerXA + pulleyRadius;
        const pulleyY = yA - pulleyRadius - 50; 

        // --- Draw Ground ---
        ctx.beginPath();
        ctx.moveTo(0, groundY);
        ctx.lineTo(canvas.width, groundY);
        ctx.stroke();
        
        // Add some ground texture
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#666';
        for(let i=0; i < 25; i++){
            ctx.beginPath();
            const x1 = 40 + Math.random() * 420;
            const x2 = x1 + 5 + Math.random() * 10;
            const y_hatch = groundY + 3 + Math.random() * 6;
            ctx.moveTo(x1, y_hatch);
            ctx.lineTo(x2, y_hatch);
            ctx.stroke();
        }
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';


        // --- Draw Block A ---
        ctx.fillStyle = '#E0E0E0';
        ctx.fillRect(xA, yA, aWidth, aHeight);
        ctx.strokeRect(xA, yA, aWidth, aHeight);
        ctx.fillStyle = 'black';
        ctx.font = 'bold 30px Arial';
        ctx.fillText('A', centerXA, yA + aHeight / 2);

        // --- Draw Block B ---
        ctx.fillStyle = '#E0E0E0';
        ctx.fillRect(xB, yB, bWidth, bHeight);
        ctx.strokeRect(xB, yB, bWidth, bHeight);
        ctx.fillStyle = 'black';
        ctx.fillText('B', centerXB, yB + bHeight / 2);

        // --- Draw Pulley System ---
        // Pulley wheel
        ctx.beginPath();
        ctx.arc(pulleyX, pulleyY, pulleyRadius, 0, 2 * Math.PI);
        ctx.fillStyle = '#B0B0B0'; // Darker gray for pulley wheel
        ctx.fill();
        ctx.stroke();
        
        // Pulley bracket/axle holder
        const bracketWidth = 20;
        const bracketHeight = 50;
        ctx.fillStyle = '#D0D0D0';
        ctx.fillRect(pulleyX - bracketWidth / 2, pulleyY - bracketHeight / 2, bracketWidth, bracketHeight);
        ctx.strokeRect(pulleyX - bracketWidth / 2, pulleyY - bracketHeight / 2, bracketWidth, bracketHeight);

        // Rod for force F
        const rodStartY = pulleyY - bracketHeight / 2;
        const rodEndY = rodStartY - 40;
        ctx.beginPath();
        ctx.moveTo(pulleyX, rodStartY);
        ctx.lineTo(pulleyX, rodEndY);
        ctx.stroke();
        
        // --- Draw Rope ---
        ctx.beginPath();
        ctx.moveTo(centerXA, yA);
        ctx.lineTo(centerXA, pulleyY);
        ctx.arc(pulleyX, pulleyY, pulleyRadius, Math.PI, 0, false);
        ctx.lineTo(centerXB, yB);
        ctx.stroke();

        // --- Draw Force F ---
        const forceArrowY = rodEndY - 50;
        // Line
        ctx.beginPath();
        ctx.moveTo(pulleyX, rodEndY);
        ctx.lineTo(pulleyX, forceArrowY);
        ctx.stroke();
        // Arrowhead
        ctx.beginPath();
        const arrowSize = 10;
        ctx.moveTo(pulleyX, forceArrowY);
        ctx.lineTo(pulleyX - arrowSize / 2, forceArrowY + arrowSize);
        ctx.moveTo(pulleyX, forceArrowY);
        ctx.lineTo(pulleyX + arrowSize / 2, forceArrowY + arrowSize);
        ctx.stroke();
        // Label
        ctx.fillStyle = 'black';
        ctx.font = 'italic bold 30px Times New Roman';
        ctx.fillText('F', pulleyX + 25, forceArrowY + 10);

        // --- Draw Bottom Text ---
        ctx.font = '30px "KaiTi", "SimSun", serif';
        ctx.fillStyle = 'black';
        ctx.fillText('习题 1-29 图', canvas.width / 2, 520);

    </script>
</body>
</html>